<template>
  <el-dialog
    title="选择你的tag"
    :visible.sync="DialogVisible"
    width="50%"
    @close="closeTagDialog"
    append-to-body
    center
  >
    <el-transfer
      filterable
      @change="handleTags"
      filter-placeholder="请输入标签"
      v-model="tags_id"
      :titles="['未选', '已选']"
      :props="transferProps"
      :data="tagList"
    >
    </el-transfer>
    <span slot="footer" class="dialog-footer">
      <el-button @click="DialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="CheckTagList">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    ShowTagDialogVisible: {
      type: Boolean,
      required: true
    },
    tag_ids: {
      type: String,
      required: true
    }
  },
  components: {},
  data() {
    return {
      DialogVisible: false,
      tags_id: [],
      tagList: [
        {
          id: '1',
          tag_name: '计算机科学'
        },
        {
          id: '2',
          tag_name: '计算技术'
        }
      ],
      selectedItemsWithObjects: [] // 存储选中项的对象数组
    }
  },
  computed: {
    transferProps() {
      return {
        key: 'id',
        label: 'tag_name',
        renderFormat: this.renderFormat,
        parseFormat: this.parseFormat
      }
    }
  },
  watch: {
    ShowTagDialogVisible: {
      immediate: true,
      handler(val) {
        this.DialogVisible = val
      }
    },
    tag_ids: {
      handler(val) {
        console.log('tag_ids', val)
        if(!val) return this.tags_id=[]
        this.tags_id = val.split(',').map(item => parseInt(item))
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getTagList()
    })
  },
  methods: {
    renderFormat(item) {
      console.log(item)
      return {
        key: item.id,
        label: item.tag_name
      }
    },
    parseFormat(item) {
      return {
        key: item.id,
        label: item.tag_name
      }
    },
    // 获取所有Tag标签
    async getTagList() {
      const res = await this.$API.tag.getAllTagList()
      if (res.status == 200) {
        this.tagList = res.data
      }
    },
    // 确定选择的tag
    CheckTagList() {
      // 将选择的id传回父组件
      let tags_id = this.tags_id.join(',')
      this.$bus.$emit('getTagsId', {
        tags_id,
        tagList: this.selectedItemsWithObjects
      })
      this.DialogVisible = false
      // 清空数据
      // this.tagList = []
      this.selectedItemsWithObjects = []
    },
    handleTags(newItems) {
      console.log(newItems)
      this.selectedItemsWithObjects = newItems.map(item => {
        console.log(item)
        return {
          id: item,
          tag_name: this.tagList.find(dataItem => dataItem.id === item).tag_name
        }
      })
    },
    closeTagDialog() {
      this.DialogVisible = false
      this.selectedItemsWithObjects = []
      this.$emit('closeTagDialog')
    }
  }
}
</script>

<style scoped lang="less">
</style>
